<template>
  <div class="shopping">
    <CartItem ref="shopping" v-for="(pro, index) in products"
      :name="pro.name"
      :key="index"
      :img="pro.img"
      :price="pro.price"
      :num="pro.num"
      @changeFatherNum="receiveFromChild"
    ></CartItem>
  </div>
</template>

<script>
import CartItem from "../components/CartItem.vue";
export default {
  name: "CartList",
  data: function () {
    return {
      products: [],
    };
  },
  created: function () {
    let products = JSON.parse(localStorage.getItem("cart")); //字符串->json对象
    this.products = products;
  },
  mounted: function () {
    //mounted:'安装好的'
    //ref有对应的属性获取
    //console.log(this.$refs.shopping);
    for(let key in this.$refs.shopping) {
       this.$refs.shopping[key].$on();  //on可以开启一个监听事件
    }
  },
  components: {
    CartItem: CartItem,
  },
  methods: {
    //接收单个参数
    receiveFromChild: function (num) {
      //num:子代传递过去的参数
      console.log("接收到了子代修改数据", num);
    },
    //接收多个参数
    // receiveFromChild:function(num,...args) {  //num:子代传递过去的参数
    //   console.log('接收到了子代修改数据',num,args);
    //   console.log('接收到了子代修改数据',num,,num2,args);
    // }
  },
};
</script>

<style scoped>
</style>